<template>
	<view class="container">
		<view class="header bg-w">
			<view class="logo">
				<image src="https://img.picbling.cn/359979e2-e3dd-4700-a06d-4ed0793d3813.png"></image>
			</view>
			<view class="navList">
				<view class="item"> 主页 </view>
				<view class="item"> 作品集合 </view>
				<view class="item"> 婚纱照 </view>
			</view>
		</view>

		<view class="">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<image src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="https://img.picbling.cn/24187c14-1420-4c13-949d-1b81727d522d.jpg"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="bannder">
			<view class="t1"> 作品欣赏 </view>
			<view class="t2"> Works Appreciate </view>
		</view>

		<view class="waterfall bg-w">
			<view class="list">
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/fc42f2f3-f1fe-459f-8aca-0ad04c3919ce.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/22f2b999-27c6-473e-a8bf-a6a5da01861d.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/24187c14-1420-4c13-949d-1b81727d522d.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/d337b44d-509f-4770-a7bf-af8e5e734792.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
				<view class="item">
					<image mode="scaleToFill"
						src="https://img.picbling.cn/9908f7a2-e2d9-47a9-9055-61768ad663f4.jpg-pcPhotographerCover">
					</image>
				</view>
			</view>
		</view>
		<view class="more">
			<view class="more-txt" @click="bandMore">
				MORE
			</view>
		</view>
		<view class="bannder">
			<view class="t1">
				关于我们
			</view>
			<view class="t2">
				About Us
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ["color1", "color2", "color3"],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			};
		},
		onLoad() {},
		methods: {},
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		font-family: Arial, sans-serif;
		line-height: 1.6;
		color: #333;
		background-color: #fff;
	}

	.bg-w {
		width: 2980rpx;
		margin: 0 auto;
	}

	/* Container for centered layout */
	.container {
		width: 100%;
		background-color: #333;
		/* Adjust based on your design */
	}

	.header {
		background-color: #333;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header .logo {
		width: 310rpx;
		height: 80rpx;
	}

	.header .logo image {
		width: 100%;
		height: 100%;
	}

	.header .navList {
		display: flex;
		color: #fff;
	}

	.navList .item {
		padding-right: 20rpx;
	}

	/* 伦堡图 */
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 1800rpx;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	/* 作品集合 */
	.bannder {
		padding: 60rpx 0 60rpx 0;
		text-align: center;
	}

	.bannder .t1 {
		color: #fff;
		font-size: 90rpx;
	}

	.bannder .t2 {
		color: #ccc;
		font-size: 46rpx;
		padding-top: 16rpx;
	}

	.waterfall {}

	.waterfall .list {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: flex-start; */
		/* align-items: flex-start; */
	}

	.list .item {
		width: 30%;
		height: 600rpx;
		margin: 10rpx;
	}

	.list .item image {
		width: 100%;
		height: 100%;
	}
	
	.more {
		display: flex;
		justify-content: center;
		padding: 40rpx 0;
	}
	
	.more .more-txt {
		color: #FFF;
		font-size: 36rpx;
		padding: 20rpx 160rpx;
		border: 1rpx solid skyblue;
	}
</style>